<template>
  <div class="login-wrap" style="padding-top: 5%">
    <el-form
      label-position="left"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="0px"
      class="demo-ruleForm login-container"
      style="width: 500px"
    >
      <h3 class="title">子公司/站点注册</h3>
      <el-form-item prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          auto-complete="off"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="telephone">
        <el-input
          type="text"
          v-model="ruleForm.telephone"
          auto-complete="off"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          auto-complete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-radio v-model="regType" :label="1">子公司</el-radio>
      <el-radio v-model="regType" :label="2">站点</el-radio><br />
      <el-select
        v-model="selectProviceValue"
        style="width: 130px; margin-top: 25px"
        placeholder="请选择省份"
      >
        <el-option
          v-for="item in this.Province"
          :key="item.id"
          :label="item.name"
          :value="item.name"
          @click.native="selectProvice(item.id)"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectCityValue"
        style="width: 130px; margin-left: 50px"
        filterable
        placeholder="请选择城市"
        v-if="City.length"
      >
        <el-option
          v-for="item in this.City"
          :key="item.id"
          :label="item.name"
          :value="item.name"
          @click.native="selectCity(item.id)"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectCountValue"
        style="width: 130px; margin-left: 50px"
        filterable
        placeholder="请选择县城"
        v-if="County.length"
      >
        <el-option
          v-for="item in this.County"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <br />
      <el-link
        type="primary"
        style="margin-left: 385px; margin-top: 30px"
        @click="$router.push({ path: '/login' })"
        >已有账号!去登录</el-link
      >
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%; margin-top: 30px"
          @click="submitForm"
          :loading="logining"
          >注册</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
import Axios from "axios";
// const baseUrl = "http://localhost:8888";
import {dev} from '../../config/index';
const baseUrl = dev.baseUrl
export default {
  name: "login",
  data() {
    return {
      //定义loading默认为false
      logining: this.$store.state.logining,
      //登录错误提示
      errMsg: this.$store.state.loginErrorMsg,
      // 记住密码
      rememberpwd: false,
      ruleForm: {
        //loginInfo和password默认为空
        username: "", //用户名或手机号
        telephone: "",
        password: "",
      },
      regType: 2, //注册类型   1：子公司  2: 站点
      Province: [],
      City: [],
      County: [],
      selectProviceValue: "", //选中的省份
      selectCityValue: "",
      selectCountValue: "",
      //rules前端验证
      rules: {
        username: [
          { required: true, message: "请正确输入账号", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请正确输入手机号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: "欢迎注册",
      type: "success",
    });
  },
  // 里面的函数只有调用才会执行
  methods: {
    //获取info列表，注册功能  注册一个县级站点 (每个县级有且只有一个站点)
    submitForm() {
      Axios({
        method: "post",
        url: `${baseUrl}/employee/regStageOrSQ`,
        data: {
          username: this.ruleForm.username,
          telephone: this.ruleForm.telephone,
          password: this.ruleForm.password,
          province: this.selectProviceValue,
          city: this.selectCityValue,
          county: this.selectCountValue,
          regType: this.regType,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          //注册成功,调回登录页
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.$router.push({ path: "/login" });
        } else {
          //注册失败,提示用户重新注册并且置空数据
          (this.ruleForm.username = ""),
            (this.ruleForm.telephone = ""),
            (this.ruleForm.password = ""),
            (this.selectProviceValue = ""),
            (this.selectCityValue = ""),
            (this.selectCountValue = "");
          if (res.data.error != null) {
            //创建时出现问题
            console.log("创建时出现问题",res.data.error);
            this.$message({
              message: res.data.error,
              type: "error",
            });
          } else if (res.data.errors != null) {
            //  参数输入有误
            console.log("参数输入有误",res.data.errors);
            for (var error in res.data.errors) {
              this.$message({
                message: res.data.errors[error],
                type: "error",
              });
            }
          }
        }
      });
    },
    getAllprovince() {
      Axios({
        method: "get",
        url: `${baseUrl}/province/list`,
      }).then((res) => {
        // console.log(res.data.page.list);
        this.Province = res.data.page.list;
      });
    },
    //选中省份，通过省份id查找所有的城市
    selectProvice(id) {
      //找所有城市
      Axios({
        method: "get",
        url: `${baseUrl}/province/getCitysById/` + id,
      }).then((res) => {
        // console.log(res)
        this.City = res.data.citys;
      });
    },
    //选中城市，通过城市id查找所有的城市  如果regType是子公司就不需要找了
    selectCity(id) {
      Axios({
        method: "get",
        url: `${baseUrl}/city/getCountysById/` + id,
      }).then((res) => {
        this.County = res.data.countys;
      });
    },
  },
  watch: {
    selectProviceValue() {
      //只要选中的省份发生改变,就将市级置空
      this.selectCityValue = "";
      this.City = [];
    },
    selectCityValue() {
      (this.selectCountValue = ""), (this.County = []);
    },
    // regType(){
    //   (this.selectCountValue = ""), (this.County = []);
    // }
  },
  mounted() {
    console.log(dev.baseUrl)
    this.getAllprovince();
  },
};
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>